import React, { useEffect, useState } from "react";
import { request } from "../../utils/request";
import { Button, Space, Table, Modal, Form, Input,  Select} from "antd";
interface ListRawState {
  id: string;
  username: string;
  password: string;
  role: string;
}

const Index: React.FC = () => {
  // 获取数据
  const getList = async () => {
    const resp = await request.get("/user/list");
    setList(resp.data.data);
  };
  // 删除接口
  const delList = async (id: string) => {
    await request.delete("/user/list/" + id);
    await getList();
  };

  // 修改接口
  const editList = async (id: string, data: ListRawState) => {
    await request.post("/user/list/" + id, data);
    await getList();
  };

  // 容器
  const [list, setList] = useState<ListRawState[]>([]);

  // 副作用
  useEffect(() => {
    getList();
  }, []);

  const columns = [
    {
      title: "id",
      dataIndex: "id",
      key: "id",
    },
    {
      title: "username",
      dataIndex: "username",
      key: "username",
    },
    {
      title: "password",
      dataIndex: "password",
      key: "password",
    },
    {
      title: "role",
      dataIndex: "role",
      key: "role",
    },
    {
      title: "role",
      dataIndex: "id",
      key: "role",
      render(id: string, row: ListRawState) {
        return (
          <Space>
            <Button type="primary" danger onClick={() => delList(id)}>
              删除
            </Button>
            <Button
              type="primary"
              onClick={() => {
                showModal(row);
              }}
            >
              修改
            </Button>
          </Space>
        );
      },
    },
  ];

  const [isModalOpen, setIsModalOpen] = useState(false);

  const showModal = (row: ListRawState) => {
    setIsModalOpen(true);
    form.setFieldsValue(row);
  };

  const handleOk = () => {
    setIsModalOpen(false);
    // 获取
    const obj = form.getFieldsValue();
    editList(obj.id, obj)
  };

  const handleCancel = () => {
    setIsModalOpen(false);
  };

  const onFinish = (values: any) => {
    console.log("Success:", values);
  };

  const onFinishFailed = (errorInfo: any) => {
    console.log("Failed:", errorInfo);
  };

  const [form] = Form.useForm();

  return (
    <div>
      <Table dataSource={list} columns={columns} />;
      <Modal
        title="Basic Modal"
        open={isModalOpen}
        onOk={handleOk}
        onCancel={handleCancel}
      >
        <Form
          form={form}
          name="basic"
          labelCol={{ span: 8 }}
          wrapperCol={{ span: 16 }}
          style={{ maxWidth: 600 }}
          initialValues={{ remember: true }}
          onFinish={onFinish}
          onFinishFailed={onFinishFailed}
          autoComplete="off"
        >
          <Form.Item
            label="id"
            name="id"
            rules={[{ required: true, message: "Please input your password!" }]}
          >
            <Input disabled />
          </Form.Item>

          <Form.Item
            label="Username"
            name="username"
            rules={[{ required: true, message: "Please input your username!" }]}
          >
            <Input disabled />
          </Form.Item>

          <Form.Item label="Select" name="role">
            <Select>
              <Select.Option value="admin">admin</Select.Option>
              <Select.Option value="user">user</Select.Option>
            </Select>
          </Form.Item>
          <Form.Item
            label="password"
            name="password"
            rules={[{ required: true, message: "Please input your password!" }]}
          >
            <Input.Password />
          </Form.Item>

        </Form>
      </Modal>
    </div>
  );
};

export default Index;
